<template>
    <div class="app-container">
        <div class="query-container">
            <el-row type="flex" justify="space-between">
                 <el-col :span="6">
                    <i class="el-icon-search"></i>
                    <span>路由管理</span>
                 </el-col>
                 <el-col :span="8"></el-col>
                 <el-col :span="4">
                    <el-button type="primary" size="mini">
                        查询
                    </el-button>
                    <el-button size="mini">
                    重置
                    </el-button>
                 </el-col>
            </el-row>
            <div style="margin-top:10px">
                <el-form :model="query.param"
                    :inline="true"
                    size="small">
                    <el-form-item label="命名空间">
                        <el-select class="input-width" placeholder="请选择命名空间" v-model="query.param.namespace">
                            <el-option v-for="item in query.namespaces" :key="item.namespace" :label="item.namespace" :value="item.namespace"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div style="margin-left: 20px">
            <el-button size="mini" type="danger" @click="refresh">
                刷新
            </el-button>
            <el-button
                size="mini" 
                type="primary"
                class="btn-add"
                @click="addPage()"
                >添加</el-button
            >
        </div>
        <div class="table-container">
            <el-table
                ref="roleTable"
                :data="list"
                style="width: 100%"
                border>
                <el-table-column label="序号" width="100" align="center" type="index"></el-table-column>
                <el-table-column label="namespace" align="center" property="namespace"></el-table-column>
                <el-table-column label="id" align="center" property="id"></el-table-column>
                <el-table-column label="order" align="center" property="order"></el-table-column>
                <el-table-column label="uri" align="center" property="uri"></el-table-column>
                <el-table-column label="predicates" align="center">
                    <template slot-scope="scope">
                        {{JSON.stringify(scope.row.predicates)}}
                    </template>
                </el-table-column>
                <el-table-column label="filters" align="center">
                    <template slot-scope="scope">
                        {{JSON.stringify(scope.row.filters)}}
                    </template>
                </el-table-column>
                <el-table-column label="metadata" align="center">
                    <template slot-scope="scope">
                        {{JSON.stringify(scope.row.metadata)}}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" property="createTime"></el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="updatePage(scope.row)">编辑
                        </el-button>
                        <el-button size="mini" type="text" @click="detailPage(scope.row)">详情
                        </el-button>
                        <el-button size="mini" type="text" @click="deletePage(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <!-- <el-pagination
                background
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="pageNum"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30]"
                :total="total"
            >
            </el-pagination> -->
        </div>
        <div class="ops-dialog">
            <el-dialog :title="edit == 1 ? '添加路由': '修改路由'" :visible.sync="editVisible" width="45%">
                <el-form :model="rt" :rules="rules" ref="editForm" label-width="50px" size="small" label-position="top">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="id" prop="id">
                                <el-input v-model="rt.id" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div style="width:30px;height: 20px"></div>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="order" prop="order">
                                <el-input v-model.number="rt.order" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="uri" prop="uri">
                        <el-input v-model="rt.uri" autocomplete="off"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="predicates" :required="true" prop="predicates">
                        <VueJsonEditor v-model="rt.predicates" 
                                        :showBtns="false" 
                                        mode="code" 
                                        lang="zh" 
                                        :expanded-on-start="true"></VueJsonEditor>
                    </el-form-item>
                    
                    <el-form-item label="filters">
                        <VueJsonEditor v-model="rt.filters"
                                       :showBtns="false"
                                        mode="code"
                                        lang="zh"
                                        :expanded-on-start="true"></VueJsonEditor>
                    </el-form-item>

                    <el-form-item label="metadata">
                        <VueJsonEditor v-model="rt.metadata"
                                       :showBtns="false"
                                        mode="code"
                                        lang="zh"
                                        :expanded-on-start="true"></VueJsonEditor>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doEdit">确 定</el-button>
                </div>
            </el-dialog>
            <RouterDetail :visibleDetail.sync="visibleDetail" :routerDetail.sync="routerDetail"></RouterDetail>
        </div>
    </div>
</template>

<script>
import {listReq, addReq, updateReq, deleteReq} from '@/api/router'
import {listNamespaceReq} from '@/api/namespace'
import VueJsonEditor from "vue-json-editor";
import RouterDetail from './RouterDetail.vue';

export default {
    name: 'RouterPage',
    data() {
        return {
            query: {
                param: {
                    namespace: ''
                },
                namespaces: [
                ]
            },
            rt: {
                namespace: '',
                id: '',
                order: 0,
                uri: '',
                predicates: [],
                filters: [],
                metadata: {}
            },
            editVisible: false,
            edit: 1,
            list: [],
            rules: {
                id: [
                    {required: true, message: "请填写id", trigger: "blur" }
                ],
                order: [
                    {required: true, message: "请填写order", trigger: "blur" },
                    { type: 'number', message: 'order必须为数字'}
                ],
                uri: [
                    {required: true, message: "请填写uri", trigger: "blur" },
                ],
                predicates: [
                    {required: true, message: "请填写predicates", trigger: "blur" },
                    {validator: (rule, value, callback) => {
                        if(!Array.isArray(value)) {
                            callback(new Error('predicates必须为数组'))
                        } else if(value.length <= 0) {
                            callback(new Error('predicates未配置'))
                        } else {
                            callback()
                        }

                    }, trigger: "blur"}
                ]
            },
            visibleDetail: false,
            routerDetail: {}
        }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            let nsReq = await listNamespaceReq()
            let nses = nsReq.data.records
            this.query.namespaces = nses
            if(this.query.namespaces.length > 0) {
                this.query.param.namespace = this.query.namespaces[0].namespace
            }
            if(this.query.param.namespace !== '') {
                this.listRouter({namespace: this.query.param.namespace})
            }
        },
        listRouter(param) {
            listReq(param).then(res => {
                this.list = res.data.records
            })
        },
        refresh() {
            this.listRouter({namespace: this.query.param.namespace})
        },
        addPage() {
            let editForm = this.$refs['editForm']
            if(editForm) {
                editForm.resetFields()
            }
            this.editVisible = true
            this.edit = 1
        },
        doAdd() {
            this.$refs['editForm'].validate((valid) => {
                if(!valid) {
                    return 
                }
                let param = this.rt
                param.namespace = this.query.param.namespace
                addReq(param).then(res => {
                    this.refresh()
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.editVisible = false
                })
            })
        },
        updatePage(row) {
            let editForm = this.$refs['editForm']
            if(editForm) {
                editForm.resetFields()
            }
            this.rt = row
            this.editVisible = true
            this.edit = 2
        },
        doUpdate() {
            this.$refs['editForm'].validate((valid) => {
                if(!valid) {
                    return 
                }

                updateReq(this.rt).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.editVisible = false
                })

            })
        },
        doEdit() {
            if(this.edit === 1) {
                this.doAdd()
            } else {
                this.doUpdate()
            }
        },
        deletePage(row) {
            let msg = `确定删除id【${row.id}】?`
            this.$confirm(msg, '提示', {
                type: 'warning'
            }).then( () => {
                deleteReq({namespace: row.namespace, id: row.id}).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.refresh()
                })
            }).catch(() => {})
        },
        detailPage(row) {
            this.visibleDetail = true
            this.routerDetail = {
                id: row.id,
                order: row.order,
                uri: row.uri,
                predicates: row.predicates,
                filters: row.filters,
                metadata: row.metadata
            }
        }
    },
    components: {
        VueJsonEditor,
        RouterDetail
    }
}
</script>

<style scoped>

</style>

<style lang="scss">
.jsoneditor-poweredBy {
    visibility: hidden;
    display: none;
}
.app-wrapper {
    height: 100%;
}
.app-container {
    height: 100%;
}
.main-container {
    height: 100%;
}
.app-main {
    height: 100%;
}
</style>